import { onMounted, onUnmounted, ref } from 'vue';
import { debounceFn } from "#/utils/debounce"
/**
 * 根据窗口大小动态调整根元素字体大小
 * @param baseWidth 设计稿基准宽度
 * @param baseFontSize 基准字体大小（px）
 */
export const useRemResize = (baseWidth = 375, baseFontSize = 16) => {
  const rootElement = ref<HTMLElement | null>(null);

  // 计算并设置根元素字体大小
  const setRootFontSize = () => {
    if (!rootElement.value) return;
    const clientWidth = window.innerWidth || document.documentElement.clientWidth;
    if (clientWidth > 0) {
      // 根据窗口宽度动态计算字体大小（示例：宽度为设计稿的一半时，字体大小也减半）
      const fontSize = (clientWidth / baseWidth) * baseFontSize;
      console.log(fontSize,"fontSize")
      rootElement.value.style.fontSize = `${fontSize}px`;
    }
  };

  console.log("use rem size")
  // 窗口大小变化时重新计算
  const handleResize = debounceFn(() => {
    setRootFontSize();
  },100);

  // onMounted(() => {
    rootElement.value = document.documentElement;
    setRootFontSize(); // 初始化时设置一次

    // 添加窗口监听事件
    window.addEventListener('resize', handleResize);
    window.addEventListener('orientationchange', handleResize); // 处理横屏切换
  // });

  // onUnmounted(() => {
    // 移除监听事件防止内存泄漏
    // window.removeEventListener('resize', handleResize);
    // window.removeEventListener('orientationchange', handleResize);
  // });

  return {
    rootElement
  };
};
